<%@ page import="com.hc.commodity.pojo.Commodity" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        #app tr{
           text-align: center;
        }
        #app td{
            line-height: 200px;
            font-size: 14px;
        }
        #number{
            width: 150px;
        }
    </style>
    <script>

        //修改数量
        var number = [1];
        function sub(trid,index){
            if (isNaN(number[index]) || number[index]<2){
                number[index] = 1;
            }else{
                number[index]--;
            }
            document.getElementById(trid).innerText = number[index];
            //数量改变后总价格也跟着变
            totalPrices(index);
        }
        function add(trid,index){
            if (isNaN(number[index])){
                number[index] = 2
            }else{
                number[index]++;
            }
            document.getElementById(trid).innerText = number[index];
            //数量改变后总价格也跟着变
            totalPrices(index);
        }

        //计算总价
        function  totalPrices(index){
            //获取单价
            var price = parseInt(document.getElementById("price"+index).innerText);
            //总价
            document.getElementById("sumPrices"+index).innerText = price*number[index];
        }
    </script>
</head>
<body>
<h1>购物车</h1>
    <div class="container">
        <table class="table table-hover table-bordered table-striped" id="app">
            <tr>
                <th>编号</th>
                <th>图片</th>
                <th>详情</th>
                <th>价格</th>
                <th>数量</th>
                <th>总价格</th>
                <th>是否删除</th>
            </tr>
            <%
                List<Commodity> shoppingTrolleyList = (List<Commodity>) session.getAttribute("shoppingTrolley");
                for (int i = 0 ; i < shoppingTrolleyList.size() ; i++) {
                    Commodity commodity = shoppingTrolleyList.get(i);
                    int j = 0;
                    for ( j = 0 ; j < i ;j++){
                        if ( commodity.equals(shoppingTrolleyList.get(j))){
                            //已经有相同的商品加入购物车了，调用数量+1的方法
                            %>
                            <script>
                                add('number<%=commodity.getCid()%>',<%=commodity.getCid()%>);
                            </script>
            <%
                            break;
                        }
                    }
                    //表示已经有相同的商品加入购物车了
                    if (j!=i){
                        continue;
                    }
                    %>
            <tr>
                <td><%=commodity.getCid()%></td>
                <td><img src="<%=commodity.getCimage()%>" width="150px" height="200px"></td>
                <td><%=commodity.getCtitle()%></td>
                <td id="price<%=commodity.getCid()%>"><%=commodity.getCprice()%></td>
                <td id="number">
                    <!-- 数量 -->
                    <a class="btn btn-info" onclick="sub('number<%=commodity.getCid()%>',<%=commodity.getCid()%>)">-</a>
                    <label id="number<%=commodity.getCid()%>">1</label>
                    <a class="btn btn-info" onclick="add('number<%=commodity.getCid()%>',<%=commodity.getCid()%>)">+</a>
                </td>
                <td id="sumPrices<%=commodity.getCid()%>"><%=commodity.getCprice()%></td>
                <td><a href="delShoppingTrolley.jsp?index=<%=i%>">删除</a> </td>
            </tr>
            <%
                }
            %>
        </table>
    </div>
</body>
</html>
